<!--交易综合统计页面-->
<template>
  <div>
    <el-row :gutter="24" class="el-row">
      <el-col :span="8" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">{{ this.$parent.dateRange }}订单数</div>
          <br>
          <div style="font-size:40px;text-align:center"> {{ orderCount }}<span style="font-size:20px">笔</span></div>
        </div>
      </el-col>
      <el-col :span="8" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey "> {{ this.$parent.dateRange }}GMV</div>
          <br>
          <div style="font-size:40px;text-align:center"> {{ orderAmount }}<span style="font-size:20px">元</span></div>
        </div>

      </el-col>
      <el-col :span="8" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">{{ this.$parent.dateRange }}下单人数</div>
          <br>
          <div style="font-size:40px;text-align:center">{{ orderUser }}<span style="font-size:20px">人</span></div>
        </div>
      </el-col>
      <el-col :span="12" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">{{ this.$parent.dateRange }}退单数</div>
          <br>
          <div style="font-size:40px;text-align:center">{{ orderRefundCount }}<span style="font-size:20px">笔</span>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">{{ this.$parent.dateRange }}退单人数</div>
          <br>
          <div style="font-size:40px;text-align:center">{{ orderRefundUserCount }}<span style="font-size:20px">人</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '@/api/statistics/order/order'

export default {
  data() {
    return {
      orderCount: 0,
      orderAmount: 0,
      orderUser: 0,
      orderRefundCount: 0,
      orderRefundUserCount: 0,
      searchObj: {
        recentDays: this.$parent.recentDays,
        dt: this.$parent.curDate
      }

    }
  },

  mounted() {
    this.init()
  },
  methods: {
    // 加载banner列表数据
    init() {
      this.searchObj.recentDays = this.$parent.recentDays
      this.searchObj.dt = this.$parent.curDate
      api.getTradeByDaysAndDt(this.searchObj).then(response => {
        this.orderCount = response.data.orderCount
        this.orderAmount = response.data.orderTotalAmount
        this.orderUser = response.data.orderUserCount
        this.orderRefundCount = response.data.orderRefundCount
        this.orderRefundUserCount = response.data.orderRefundUserCount

      }).catch(response => {
        console.log('失败' + response)
        // Vue.$message.error('服务器错误，请稍后再试')
        //reject(response)
      })
    }
  }
}
</script>

